<template>
  <div>
    <el-divider class="layoutDivider"></el-divider>
    <div class="form-user">
      <el-avatar :src="avatar" style="float: left" fit="fill"> </el-avatar>
      <div style="float: left; width: 88%">
        <el-input
          placeholder="输入评论"
          v-model="input"
          clearable
          @click.native="focus()"
        >
        </el-input>
        <div class="editBottom" v-show="showStatus">
          <el-button
            type="primary"
            plain
            round
            size="mini"
            @click="upload"
            style="font-size: 15px"
            >评论</el-button
          >
        </div>
      </div>
    </div>

    <div
      class="commentListStyle"
      v-for="(body, index) in commentList"
      :key="body.comment.comment_id"
    >
      <el-divider class="commentDivider" v-if="CommentCount != 0"></el-divider>
      <el-avatar :src="body.avatar" class="commentAvatar"></el-avatar>

      <div class="avatar-info">
        <span class="name" style="font-size: 14px; font-weight: 500">
          {{ body.uname }}
        </span>
        <el-divider direction="vertical"></el-divider>
        <span class="time-before" style="font-size: 14px; color: #8690a8">
          {{ uptime(body.comment.create_time) }}
        </span>
      </div>
      <div class="commentContent">
        {{ body.comment.content }}
      </div>
      <div class="selector">
        <span
          :class="body.comment.likeStatus ? 'icon iconfont icon-zan' : 'icon iconfont icon-zan1' "
          style="font-size: 12px; margin: 0px; color: #86909c"
          @click="likeCommentClick(body.comment.comment_id, index, body.comment.likeStatus)"
          v-text="body.comment.like_count == 0 ? likeComText : body.comment.like_count"
        >
        </span
        >
        <span class="icon iconfont icon-xiaohuifu"
         v-text="body.comment.reply_count == 0 ? replyText : body.comment.reply_count"></span>
      </div>
    </div>
  </div>
</template>

<script>
import { verify_fail } from "../plugins/notification";
import { time_util } from "../plugins/time_utils";

export default {
  props: {
    talkInfo: {
      avatar: "",
      talk: {},
      uname: "",
    },
  },
  data() {
    return {
      input: "",
      avatar: this.talkInfo.avatar,
      talk: this.talkInfo.talk,
      showStatus: false,
      CommentCount: 0,
      commentList: [],
      replyText: "    回复",
      likeComText: "    点赞"
    };
  },
  methods: {
    async upload() {
      await this.$http
        .get("/auth/verify")
        .then(async () => {
          await this.$http
            .post(
              "/normal/postTalkComment",
              {},
              {
                params: {
                  content: this.input,
                  talkId: this.talk.talk_id,
                  talkUid: this.talk.uid,
                  uId: this.$store.state.uid,
                },
              }
            )
            .then((res) => {
              console.log("post comment res", res);
              let newCommentEle = {
                avatar: this.avatar,
                comment: {
                  content: this.input,
                  create_time: new Date(),
                },
                uname: this.$store.state.uname
              }
              // add commentList
              this.commentList.unshift(newCommentEle)
              this.input = ""
            });
        })
        .catch((e) => {
          verify_fail();
        });
    },
    focus() {
      this.showStatus = true;
    },
    async searchTalkComment() {
      await this.$http
        .get("/normal/getTalkComment", {
          params: {
            talkId: this.talk.talk_id,
          },
        })
        .then((res) => {
          this.commentList = res.data;
          console.log("commentList", this.commentList);
          this.CommentCount = res.data.length;
        });
    },
    uptime(time_up) {
      return time_util(time_up);
    },
    async likeCommentClick(commentId, index, likeStatus) {
      await this.$http.get("/auth/verify").then(async() => {
        await this.$http.post("normal/likeComment", {}, {
          params: {
            comment_id: commentId,
            u_id: this.$store.state.uid,
            likeStatus: likeStatus
          }
        }).then((res) => {
          var tmp = {
            comment: res.data,
            avatar: this.commentList[index].avatar,
            uname: this.commentList[index].uname
          }
          console.log("tmp", tmp);

          this.commentList.splice(index, 1, tmp)

  
        }).catch()
      }).catch(e => {
        verify_fail();
      })
    }
  },
  created() {
    this.searchTalkComment();
  },
};
</script>

<style scoped>
.el-divider {
  margin-top: 0%;
}

.commentDivider {
  margin-top: 2px;
  margin-bottom: 10px;
}

.form-user {
  display: flex;
  margin-left: 10px;
  padding-bottom: 20px;
}

.editBottom {
  margin-left: 91.5%;
}

#input {
  /* width: 100%; */
}

.el-input {
  margin-right: 0%;
  margin-left: 20px;
}

.userContent {
}

.commentListStyle {
  padding-left: 10px;
  padding-bottom: 10px;
}

.commentContent {
  font-size: 14px;
  text-align: left;
}

.commentAvatar {
  margin-bottom: 10px;
  margin-right: 10px;
  display: flex;
  float: left;
}

.time-before {
  /* margin-top: 3px; */
  /* float: left; */
}

.avatar-info {
  display: inherit;
  text-align: left;
  padding: 4px 6px 6px 2px;
  margin-bottom: 5px;
}

.selector {
  text-align: left;
  margin-top: 5px;
  margin-left: 48px;
}

.icon-zan1 {
  cursor: pointer;
  width: fit-content;
}

.icon-zan {
  cursor: pointer;
  width: fit-content;
}

.icon-xiaohuifu {
  width: fit-content;
  cursor: pointer;
  font-size: 12px;
  margin-left: 20px;
  color: #86909c;
}
</style>
